<template>
  <div class="top">
    <el-form :model="Searchform" label-width="120px">
      <el-form-item label="工单编号：">
        <el-input v-model="Searchform.name" placeholder="请输入" />
      </el-form-item>

      <el-form-item label="选择日期：">
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size" />
          </div>
        </div>
      </el-form-item>
      <el-button type="primary" @click="onSubmitSearch">查询</el-button>
    </el-form>
    <div class="bottom">
      <el-table :data="currentPageRecords" style="width: 100%" @row-click="DeailItem">
        <el-table-column type=index label="序号" width="80" />
        <el-table-column prop="orderNo" label="订单编号" width="230" />
        <el-table-column prop="skuName" label="商品名称" width="100" />
        <el-table-column prop="price" label="订单金额（元）" width="100" />
        <el-table-column prop="innerCode" label="设备编号" width="130" />
        <el-table-column prop="status" label="订单状态" width="130" />
        <el-table-column prop="createTime" label="订单日期" width="130" />
        <el-table-column prop="operator" label="操作" width="130" />
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="!value1&&!Searchform.name">
      <el-pagination background v-model:currentPage="currentPage" layout="prev, pager, next" :total="+totalCount" @prev-click=GetInitorderList() @next-click=GetInitorderList() @current-change=GetInitorderList() />
    </div>
    <!-- 查询分页 -->
    <div class="pagination" v-else-if="value1 ||Searchform.name">
      <el-pagination background v-model:currentPage="currentPage1" layout="prev, pager, next" :total="+totalCount1" @prev-click=onSubmitSearch() @next-click=onSubmitSearch() @current-change=onSubmitSearch() />
    </div>
  </div>

</template>

<script setup lang="ts">
import type { Iorder } from "./type";
import { reactive, ref } from "vue";
import {
  GetorderList,
  GetordDate,
  GetordDate1,
  GetordDate2,
} from "@/api/order";
const Searchform = reactive({
  name: "",
});
const value1 = ref("");
const size = ref<"" | "large" | "small">("");
const currentPage = ref(1);
const currentPage1 = ref(1);
const totalCount = ref(0);
const totalCount1 = ref(0);
const currentPageRecords = ref<Iorder[]>([]);
const GetInitorderList = async () => {
  let res = await GetorderList(currentPage.value, 10);
  totalCount.value = res.totalCount;
  res.currentPageRecords.forEach((item) => {
    if (item.status === 0) {
      item.status = "未支付";
    } else if (item.status === 1) {
      item.status = "已支付";
    } else if (item.status === 2) {
      item.status = "出货成功";
    } else {
      item.status = "出货失败";
    }
    item.operator = "查看详情";
  });
  currentPageRecords.value = res.currentPageRecords;
};
GetInitorderList();
const DeailItem = () => {
  console.log(111);
};
const onSubmitSearch = async () => {
  if (value1.value && Searchform.name) {
    console.log(value1.value);
    const startDate = JSON.stringify(value1.value[0])?.slice(
      1,
      JSON.stringify(value1.value[0]).indexOf("T")
    );
    const endDate = JSON.stringify(value1.value[1])?.slice(
      1,
      JSON.stringify(value1.value[1]).indexOf("T")
    );
    console.log(startDate, endDate);
    let res = await GetordDate(
      +currentPage1.value,
      startDate,
      endDate,
      Searchform.name
    );
    console.log(res);
    totalCount1.value = res.totalCount;
    res.currentPageRecords.forEach((item) => {
      if (item.status === 0) {
        item.status = "未支付";
      } else if (item.status === 1) {
        item.status = "已支付";
      } else if (item.status === 2) {
        item.status = "出货成功";
      } else {
        item.status = "出货失败";
      }
      item.operator = "查看详情";
    });
    currentPageRecords.value = res.currentPageRecords;
  } else if (value1.value && !Searchform.name) {
    console.log(value1.value);
    const startDate = JSON.stringify(value1.value[0])?.slice(
      1,
      JSON.stringify(value1.value[0]).indexOf("T")
    );
    const endDate = JSON.stringify(value1.value[1])?.slice(
      1,
      JSON.stringify(value1.value[1]).indexOf("T")
    );
    console.log(startDate, endDate);
    let res = await GetordDate2(+currentPage1.value, startDate, endDate);
    console.log(res);
    totalCount1.value = res.totalCount;
    res.currentPageRecords.forEach((item) => {
      if (item.status === 0) {
        item.status = "未支付";
      } else if (item.status === 1) {
        item.status = "已支付";
      } else if (item.status === 2) {
        item.status = "出货成功";
      } else {
        item.status = "出货失败";
      }
      item.operator = "查看详情";
    });
    currentPageRecords.value = res.currentPageRecords;
  } else {
    let res = await GetordDate1(+currentPage1.value, Searchform.name);
    console.log(res);
    totalCount1.value = res.totalCount;
    res.currentPageRecords.forEach((item) => {
      if (item.status === 0) {
        item.status = "未支付";
      } else if (item.status === 1) {
        item.status = "已支付";
      } else if (item.status === 2) {
        item.status = "出货成功";
      } else {
        item.status = "出货失败";
      }
      item.operator = "查看详情";
    });
    currentPageRecords.value = res.currentPageRecords;
  }
};
</script>
<style scoped lang="less">
.top {
  margin-top: -15px;
  margin-left: -70px;
  .el-form {
    display: flex;
  }
  .el-button {
    margin-left: 10px;
  }
  .conter {
    margin-left: 30px;
    margin-top: 30px;
    .el-button {
      border: 0;
    }
  }
}
.pagination {
  width: 100%;
  height: 10vh;
  margin-top: 20px;
  margin-left: 300px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  margin-top: -27px;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.bottom {
  margin-left: 70px;
  margin-top: 25px;
}
</style>